<template>
	<view class="bindPhone-page">
		<view class="info-box">
			<view class="title">绑定的新手机号</view>
			<view class="old-num">原绑定手机号：177****8813</view>
		</view>
		<view class="modification-area">
			<view class='item'><input type='number' placeholder='请输入原绑定的完整手机号' placeholder-class='placeholder'></input></view>
			<view class='item'><input type='number' placeholder='请输入新的手机号' placeholder-class='placeholder'></input></view>
			<view class='checking'>
				<view class='code'><input placeholder='请输入短信验证码' placeholder-class='placeholder'></input></view>
				<view class="get-code">获取验证码</view>
			</view>
			<view class="bind-btn">确认绑定</view>
		</view>
		
	</view>
	
</template>

<script>
	
</script>

<style lang="scss">
	
	page {
		background: #ffffff;
	}
	.info-box {
		margin: 80rpx 0;
		text-align: center;
		
		.title {
			font-size: 40rpx;
			font-weight: bold;
			color: #1F1F1F;
		}
		
		.old-num {
			margin-top: 24rpx;
			font-size: 28rpx;
			color: #999999;
		}
	}
	
	.modification-area {
		padding: 0 48rpx;
		
		.item {
			padding: 32rpx 0;
			border-bottom: 2rpx solid #F5F5F5;
			
			.placeholder {
				font-size: 32rpx;
				color: #999999;
			}
			
		}
		
		.checking {
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.code {
				padding: 32rpx 0;
				width: 462rpx;
				border-bottom: 2rpx solid #F5F5F5;
				
				.placeholder {
					font-size: 32rpx;
					color: #999999;
				}
			}
			
			.get-code {
				font-size: 24rpx;
				font-weight: bold;
				color: #39CCC2;
				width: 168rpx;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				border-radius: 8rpx;
				border: 2rpx solid #39CCC2;
			}
		}
		.bind-btn {
			margin: 0 auto;
			margin-top: 80rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
			width: 654rpx;
			height: 96rpx;
			line-height: 96rpx;
			text-align: center;
			background: rgba(57,204,194,0.56);
			border-radius: 16rpx;
		}
		
	}
	
	
</style>